<script setup>
import {ref,onMounted,onUnmounted,inject} from 'vue'
import Clock from '@/components/clock.vue'
import MapModule from '@/components/map.vue'
import {downloadMap} from '@/utils/downLoad'
import {upDateCurrentTime,upDateCurrentDate,fethLocation,fethWeather} from '@/utils/timeWeather'
import {createDraw} from '@/utils/draw'
import {calculateArea,calculateDistance} from '@/utils/computed'
// 引入图表
import CityPie from './views/chart/cityPie.vue'
import IntensityBar from './views/chart/intensityBar.vue'
import LeftFirstChart from './views/chart/diasterType.vue'
import LeftSecondChart from './views/chart/leftSecond.vue'

const currentTime = ref('')
const currentDate = ref('')
const weatherInfo = ref('')
const activeTool = ref('')
const layers = ref([])
let drawSource = {}
let map
let drawInteraction = null
let measureInteraction = null
let measureSource = new ol.source.Vector()
let measureLayer = new ol.layer.Vector({
  source:measureSource,
  title:'测量图层'
})

//天气开关
const amapKey = '478b72215fa422eddb4febb0548a14ab'
const showWeather = ref(true)
const toggleWeather = () => {
  showWeather.value =!showWeather.value
}

// 设置动画效果
const animateView = () => {
  const view = map.getView()
  view.cancelAnimations()
  view.animate({
    center:[102.7,30.6],
    zoom:6,
    duration:1000
  })
}
// 设置画笔激活
const activeDrawTool = (type) => {
  if(drawInteraction){
    map.removeInteraction(drawInteraction)
    drawInteraction = null
  }
  drawInteraction = createDraw({
    type,
    source:drawSource[type]
  })
  map.addInteraction(drawInteraction)
  drawInteraction.on('drawend',() => {
    map.removeInteraction(drawInteraction)
    drawInteraction = null
  })
}
// 清空画布
const clearDraw = () => {
  for(const key in drawSource) {
    drawSource[key].clear()
  }
}
// 激活测量工具
const activeMeasureTool = (type) => {
  if(measureInteraction) {
    map.removeInteraction(measureInteraction)
    measureInteraction = null
  }
  measureInteraction = createDraw({
    type,
    source:measureSource
  })
  map.addInteraction(measureInteraction)
  measureInteraction.on('drawend',(e) => {
    const geometry = e.feature.getGeometry()
    let coordinates = geometry.getCoordinates()
    if(type === 'LineString') {
      calculateDistance(coordinates)
    } else if (type === 'Polygon') {
      const exteriorRing = coordinates[0]
      calculateArea(exteriorRing)
    }
    map.removeInteraction(measureInteraction)
    measureInteraction = null
  })
  }
  onMounted(() => {
    upDateCurrentTime(currentTime)
    upDateCurrentDate(currentDate)
    fethLocation(amapKey,(city) => {
      fethWeather(city,amapKey,weatherInfo)
    })
    const timer = setInterval(() => {
      upDateCurrentTime(currentTime)
      upDateCurrentDate(currentDate)
    },1000)
    map = inject('$map')
    if (!map) {
    console.error('地图实例未找到!')
    return
  }
    layers.value = map.getLayers().getArray()
    drawSource = {
      Point:new ol.source.Vector(),
      LineString:new ol.source.Vector(),
      Polygon:new ol.source.Vector(),
      Circle:new ol.source.Vector()
    }
    for(const [type,source] of Object.entries(drawSource)) {
      const drawLayer = new ol.layer.Vector({
        source,
        title:'画笔图层'
      })
      map.addLayer(drawLayer)
    }
    map.addLayer(measureLayer)
    onUnmounted(() => {
      clearInterval(timer)
      if(drawInteraction) {
        map.removeInteraction(drawInteraction)
        drawInteraction = null
      }
      if(measureInteraction) {
        map.removeInteraction(measureInteraction)
        measureInteraction = null
      }
      map.setDoubleClickZoom(true)
    })
  })
// 切换工具
  const toggleToolMenu = (tool) => {
    if(activeTool.value === tool) {
      activeTool.value = ''
    }else {
      activeTool.value = tool
      console.log(activeTool.value)

    }
  }
  // 切换图层显隐
  const toggleLayer = (layer) => {
    const currentVisibility = layer.getVisible()
    layer.setVisible(!currentVisibility)
  }
// 通过title移除地图
const removeLayerByTitle = (title) => {
  map.getLayers().getArray().forEach((layer) => {
    if(layer.get('title') === title) {
      map.removeLayer(layer)
    }
  })
}
// 通过title获取图层
const getLayerByTitle = (title) => {
  return map.getLayers().getArray().find((layer) => {
    return layer.get('title') === title
  })
}
// 热力图
const showHeatmap = ref(false)
let heatMapLayer = ref(null) // 存储热力图图层实例

const performHeatmapAnalysis = () => {
  if (showHeatmap.value) {
    // 关闭热力图
    removeLayerByTitle('热力图')
    getLayerByTitle('地质灾害点').setVisible(true)
  } else {
    // 创建热力图
    const heatSource = new ol.source.Vector({
      wrapX:false,
      url: '/src/assets/SCdiaster.json',
      format: new ol.format.GeoJSON()
    })

    heatMapLayer.value = new ol.layer.Heatmap({
      source: heatSource,
      blur: 7,
      radius: 5,
      gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'],
      weight: (feature) => {
        const weight = feature.get('weight')
        return weight ? Math.min(weight, 1) : 0.1
      },
    })
    removeLayerByTitle('热力图')
    getLayerByTitle('地质灾害点').setVisible(false)
    heatMapLayer.value.set('title', '热力图')
    map.addLayer(heatMapLayer.value)
  }

  showHeatmap.value = !showHeatmap.value
  map.render()
}
</script>

<template>
  <div class="dashboard-container">
    <div class="header">
      <img class="logo" src="/src/assets/logo.png" alt="logo" />
      <h1 class="title">四川省地质灾害数据管理平台</h1>
    </div>

    <!-- 显示日期 -->
    <div class="date">
      <Clock />
    </div>

    <!-- 天气按钮 -->
    <div class="weather-button" @click="toggleWeather">
      <i class="iconfont icon-duoyun"></i>
    </div>

    <!-- 天气信息部分 -->
    <div class="weather" v-if="showWeather">
      <div class="weather-details">
        <div class="city">
          <div>{{ weatherInfo.city }}</div>
          <span>{{ weatherInfo.weather }}</span>
        </div>

        <div class="info">
          <span
            ><i class="iconfont icon-wendu"></i
            >{{ weatherInfo.temperature }}℃</span
          >
          <span
            ><i class="iconfont icon-fengxiang"></i
            >{{ weatherInfo.winddirection }}</span
          >
          <span
            ><i class="iconfont icon-shidu"></i
            >{{ weatherInfo.humidity }}%</span
          >
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="left">
        <div class="chart panel">
          <div class="title">灾害体类型分布</div>
          <div class="chart-container">
            <LeftFirstChart />
          </div>
        </div>
        <div class="chart panel">
          <div class="title">威胁人口和威胁财产分布</div>
          <div class="chart-container">
            <LeftSecondChart />
          </div>
        </div>
      </div>
      <div class="map-container">
        <div class="map">
          <MapModule />
        </div>
        <div class="toolbox">
          <div class="tool-item" @click="toggleToolMenu('layer')">
            <i class="iconfont icon-023tuceng"></i>
            <div class="text">图层管理</div>
            <div v-if="activeTool === 'layer'" class="tool-options">
              <!-- 图层显隐选项 -->
              <div
                v-for="layer in layers"
                :key="layer.get('title')"
                @click="toggleLayer(layer)"
                :class="{ activelayer: layer.getVisible() }"
              >
                {{ layer.get("title") }}
              </div>
            </div>
          </div>
          <div class="tool-item" @click="toggleToolMenu('draw')">
            <i class="iconfont icon-xihuabi"></i>
            <div class="text">画笔</div>
            <div v-if="activeTool === 'draw'" class="tool-options">
              <!-- 点、线、多边形等工具选项 -->
              <div @click="activeDrawTool('Point')">
                <i class="iconfont icon-mti-gong-juliceliang"></i>点画笔
              </div>
              <div @click="activeDrawTool('LineString')">
                <i class="iconfont icon-xian"></i>线画笔
              </div>
              <div @click="activeDrawTool('Polygon')">
                <i class="iconfont icon-duobianxing"></i>面画笔
              </div>
              <div @click="activeDrawTool('Square')">
                <i class="iconfont icon-mian"></i>矩形画笔
              </div>
              <div @click="activeDrawTool('Circle')">
                <i class="iconfont icon-radio-on"></i>圆画笔
              </div>
              <div @click="clearDraw">
                <i class="iconfont icon-qingkonghuabu"></i>清空画布
              </div>
            </div>
          </div>
          <div class="tool-item" @click="toggleToolMenu('measure')">
            <i class="iconfont icon-celiangleixing"></i>
            <div class="text">测量</div>
            <div v-if="activeTool === 'measure'" class="tool-options">
              <div @click="activeMeasureTool('LineString')">
                <i class="iconfont icon-mti-gong-juliceliang"></i>测量距离
              </div>
              <div @click="activeMeasureTool('Polygon')">
                <i class="iconfont icon-mti-gong-mianjiceliang"></i>测量面积
              </div>
            </div>
          </div>
          <div class="tool-item" @click="toggleToolMenu('analysis')">
            <i class="iconfont icon-relitu" :class="{ 'active-tool': showHeatmap }"></i>
            <div class="text" @click="performHeatmapAnalysis">
            {{ showHeatmap ? '关闭热力' : '热力图' }}
            </div>
          </div>
          <div class="tool-item">
            <i class="iconfont icon-ico_dituxiazai"></i>
            <div class="text" @click="downloadMap(map)">下载地图</div>
          </div>
          <div class="tool-item">
            <i class="iconfont icon-ditu01"></i>
            <div class="text" @click="animateView">定位到四川</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="layer-control panel">
          <div class="title">市级灾害点占比</div>
          <CityPie />
        </div>
        <div class="second">
          <div class="chart panel">
            <div class="title">灾害点威胁等级分布</div>
            <div class="chart-container">
              <IntensityBar />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      © 2024 四川省地质灾害数据管理平台&nbsp;
      <a href="">HXP</a>&nbsp;
      <i class="iconfont icon-Gmail"></i>&nbsp;Email:
      <a href="">3010441184@qq.com</a>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.dashboard-container {
  user-select: none; /* 禁用文本选择 */
  width: 100%;
  height: 100vh;
  background: url("@/assets/dashBoardBG.jpeg") no-repeat center center;
  background-size: cover;
  position: relative;
}

// 通用面板样式
.panel {
  position: relative;
  background: rgba(255, 255, 255, 0.05); /* 更透明的背景色 */
  border: 2px solid transparent;
  border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
  border-image-source: url("@/assets/border.png");
  border-image-slice: 51 38 20 132;
  border-image-repeat: stretch; /* 确保边框图像重复填充，适应内容 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  backdrop-filter: blur(2px); /* 背景模糊效果 */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 过渡效果 */
  padding-right: 5px;
  margin-bottom: 15px;
  .title {
    text-align: center;
    margin-bottom: 2px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 增强文本可读性 */
  }

  &:hover {
    transform: translateY(-5px); /* 悬停时上移效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时阴影增强 */
  }
}

// 头部
.header {
  width: 100%;
  height: 80px;
  background: url("@/assets/Header.png") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;

  .logo {
    transform: translateY(-5px);
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
  }

  .title {
    transform: translateY(-5px);
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  &:hover .logo {
    transform: scale(1.1) translateY(-5px);
  }
}

/* 日期样式 */
.date {
  align-items: center;
  justify-content: center;
  z-index: 99;
  position: fixed;
  right: 30px;
  top: 8px;
}
/* 天气按钮样式 */
.weather-button {
  position: fixed;
  z-index: 100;
  left: 10px;
  top: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 15px;

  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  .iconfont {
    color: #dddddd;
    font-size: 15px;
  }
}

/* 天气信息样式 */
.weather {
  position: fixed;
  z-index: 99;
  left: 60px;
  top: 2px; /* 调整位置，使其在按钮下方 */
  background-color: #dddddd;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: black;
  max-width: 300px;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.weather-icon {
  z-index: 999;
  font-size: 30px;
  margin-bottom: 10px;
  color: #ffdd57; /* 根据天气类型调整颜色 */
}

.weather-details {
  display: flex;
  flex-direction: column;
  .city {
    display: flex;

    justify-content: space-between;
    font-size: 16px;
    font-family: "华文细黑";
    margin-bottom: 8px;
  }
}

.info {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  align-items: center;
}

.info span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info i {
  font-size: 16px;
}
// 内容区域
.main-content {
  display: flex;
  width: 100%;
  height: calc(100vh - 80px);
  color: white;
  .left {
    margin: 0 15px;
    width: 280px;
    z-index: 99;
    .panel {
      height: 200px;
    }
  }
  .map-container {
    position: relative;
    padding-top: 30px;
    flex: 1;
    .map {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    }
    .toolbox {
      position: absolute;
      bottom: 35px;
      left: 50%;
      transform: translateX(-40%);
      width: 90%;
      display: flex;
      justify-content: space-between;

      .tool-item {
        position: relative; /* 设置相对定位以便子元素绝对定位 */
        width: 65px;
        height: 55px;
        background: url("@/assets/baseBottom.png") no-repeat center center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        .activelayer {
          color: #ffcc00; /* 高亮颜色 */
          font-weight: bold; /* 文字加粗 */
          text-shadow: 0 0 5px rgba(255, 255, 0, 0.7); /* 添加文本阴影以增强可见性 */
        }

        .iconfont {
          transform: translateY(-10px);
          color: #ffffff;
          font-size: 20px;
          transition: color 0.3s ease;
        }

        .text {
          transform: translateY(-8px);
          color: #ffffff;
          font-size: 12px;
          font-weight: bold;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          transition: color 0.3s ease;
        }

        &:hover {
          transform: translateY(-2px) scale(1.05);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

          .iconfont,
          .text {
            color: #ffcc00;
          }
        }

        .tool-options {
          position: absolute; /* 绝对定位以便可以自由定位 */
          bottom: 60px; /* 初始位置在工具项的上方 */
          left: 50%;
          transform: translateX(-50%) translateY(10px); /* 向上偏移10px */
          opacity: 0; /* 初始透明度为0 */
          background-color: rgba(0, 0, 0, 0.8);
          border-radius: 5px;
          padding: 15px 10px;
          padding-bottom: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */

          div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 6x;
            color: #ffffff;
            font-size: 10px; /* 调小文字大小 */
            margin-bottom: 4px; /* 选项间距 */
            cursor: pointer;
            white-space: nowrap; /* 防止文字换行 */
          }
        }

        &:hover .tool-options {
          transform: translateX(-50%) translateY(0); /* 悬停时向上移动 */
          opacity: 1; /* 悬停时显示 */
        }
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    min-width: 250px;
    z-index: 99;
    .panel {
      width: 360px;
      height: 150px;
    }
    .second {
      width: 420px;
      display: flex;
      justify-content: end;
      .panel {
        width: 100px;
        height: 220px;
        &:first-child {
          margin-right: 5px;
        }
        &:last-child {
          width: 200px;
          height: 225px;
        }
      }
    }
  }
}
.footer {
  user-select: text;
  text-align: center;
  position: fixed;
  bottom: 0px;
  padding: 6px;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明的深色背景 */
  color: #f0f0f0; /* 柔和的白色文字 */
  left: 50%;
  transform: translateX(-50%);
  font: 200 12px "华文细黑";
  border-radius: 8px; /* 更圆的边角 */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2); /* 较轻的阴影效果 */
  .iconfont {
    font: 1em sans-serif;
    margin: 0 1px;
  }
  a {
    color: #ffdd57; /* 柔和的黄色 */
    text-decoration: none; /* 去掉下划线 */
    margin-left: 3px;
  }
}
</style>
